// 这是一个工具类函数

/* 
    获取范围之间随机数 
    @param a 范围下限
    @param b 范围上限
    @return 拿到的一个随机数
*/

function getRandom(a, b) {
    return Math.floor(Math.random() * (b - a + 1) + a)
}

/* 
    获取随机颜色的函数
*/
function getColor() {
    return "rgb(" + getRandom(0, 255) + "," + getRandom(0, 255) + "," + getRandom(0, 255) + ")"
}

/* 
    封装一个 函数 获取数组里面最大的一个数
*/
function arrMax(arr) {
    var max = arr[0]
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i]
        }
    }
    return max
}
// 封装一个 函数 获取数组里面最小的一个数

function arrMin(arr) {
    var min = arr[0]
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] < min) {
            min = arr[i]
        }
    }
    return min
}

/* 
    css函数  可以获取非行内样式也可以设置样式 
    @param ele 要获取/设置的那个元素
    @param attr 要获取/设置的那个属性
    @param value  可选 要设置的属性值
    @return 获取到的属性值

*/
function css(ele, attr, value) {
    // value 传入了 是设置  没有就是获取
    // console.log(typeof value === "undefined")
    if (typeof value === "undefined") {
        // 没有传入第三个参数 那就是获取
        return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : ele.currentStyle[attr]
    }
    // 设置 
    // ele.style[attr] = parseInt(value) + "px"
    ele.style[attr] = value
}

/* 
    绑定事件 添加事件监听
    @param ele 要绑定事件的元素
    @param type 事件类型
    @param fn 事件处理函数

*/

function on(ele, type, fn) {
    if (ele.addEventListener) {
        if (type.indexOf("on") === 0) {
            type = type.slice(2)
        }
        ele.addEventListener(type, fn)
    } else {
        if (type.indexOf("on") !== 0) {
            type = "on" + type
        }
        ele.attachEvent(type, fn)
    }
}

/* 
    移除
    @param ele 要移除事件的元素
    @param type 事件类型
    @param fn 事件处理函数

*/

function off(ele, type, fn) {
    if (ele.addEventListener) {
        if (type.indexOf("on") === 0) {
            type = type.slice(2)
        }
        ele.removeEventListener(type, fn)
    } else {
        if (type.indexOf("on") !== 0) {
            type = "on" + type
        }
        ele.detachEvent(type, fn)
    }
}


// function $(id) {
//     return document.getElementById(id)
// }
/* 
    通过 id/class/标签名获取元素
    @param selector id/class/标签选择器
    @param context 查找元素的一个范围
    @return 找到的元素或者伪数组
*/
function $(selector, context) {
    context = context || document
    if (selector.slice(0, 1) === "#") {
        return document.getElementById(selector.slice(1))
    }
    if (selector.slice(0, 1) === ".") {
        return context.getElementsByClassName(selector.slice(1))
    }
    return context.getElementsByTagName(selector)
}
/* 
    pageX 和 pageY的兼容处理
    @param e 事件对象
    @return {x:..,y:..}
*/

function page(e) {
    if (e.pageX) {
        return { x: e.pageX, y: e.pageY }
    } else {
        // IE8及以下 
        var _x = document.documentElement.scrollLeft ? document.documentElement.scrollLeft + e.clientX : document.body.scrollLeft + e.clientX
        var _y = document.documentElement.scrollTop ? document.documentElement.scrollTop + e.clientY : document.body.scrollTop + e.clientY
        return { x: _x, y: _y }
    }
}
/* 
    获取元素不包含变宽的宽度
    @param ele 要获取宽度的元素
    @return 元素宽度 + padding 的宽度
*/
function inWidth(ele) {
    // 判断元素是否是隐藏的
    if (css(ele, "display") === "none") {
        return parseFloat(css(ele, "width")) + parseFloat(css(ele, "paddingLeft")) + parseFloat(css(ele, "paddingRight"))
    }
    return ele.clientWidth
}

/* 
    获取元素不包含边框的宽度
    @param ele 要获取高度的元素
    @return 元素高度 + padding 的宽度
*/
function inHeight(ele) {
    // 判断元素是否是隐藏的
    if (css(ele, "display") === "none") {
        return parseFloat(css(ele, "height")) + parseFloat(css(ele, "paddingTop")) + parseFloat(css(ele, "paddingBottom"))
    }
    return ele.clientHeight
}

/* 
    获取元素包含边框的宽度
    @param ele 要获取宽度的元素
    @return 元素宽度 + padding 的宽度
*/
function outWidth(ele) {
    // 判断元素是否是隐藏的
    if (css(ele, "display") === "none") {
        return parseFloat(css(ele, "width")) + parseFloat(css(ele, "paddingLeft")) + parseFloat(css(ele, "paddingRight")) + parseFloat(css(ele, "borderLeftWidth")) + parseFloat(css(ele, "borderRightWidth"))
    }
    return ele.offsetWidth
}

/* 
    获取元素包含边框的高度
    @param ele 要获取高度的元素
    @return 元素高度 + padding +  border
*/
function outHeight(ele) {
    // 判断元素是否是隐藏的
    if (css(ele, "display") === "none") {
        return parseFloat(css(ele, "height")) + parseFloat(css(ele, "paddingTop")) + parseFloat(css(ele, "paddingBottom")) + parseFloat(css(ele, "borderTopWidth")) + parseFloat(css(ele, "borderBottomWidth"))
    }
    return ele.offsetHeight
}



function animate(ele, options, duration, fn) {
    clearInterval(ele.timer)
    let start = {}, range = {}
    for (var key in options) {
        start[key] = parseFloat(css(ele, key))
        range[key] = options[key] - start[key]
    }

    let startTime = +new Date()
    ele.timer = setInterval(function () {
        let nowTime = +new Date() 
        let timeDifference = Math.min(nowTime - startTime, duration)
        for (var attr in options) {
            let result = start[attr] + range[attr] / duration * timeDifference
            result = attr === "opacity" ? result : result + "px"
            ele.style[attr] = result
        }
        if (timeDifference >= duration) {
            clearInterval(ele.timer)
            fn && fn()
        }
    }, 10)
}


// 淡入
function fadeIn(ele, duration, fn) {
    css(ele, 'display', 'block')
    css(ele, 'opacity', 0)
    animate(ele, { "opacity": 1 }, duration, fn)
}
// 淡出
function fadeOut(ele, duration, fn) {
    css(ele, 'display', 'block')
    css(ele, 'opacity', 1)
    animate(ele, { "opacity": 0 }, duration, function () {
        css(ele, 'display', 'none')
        fn && fn()
    })
}


